<template>
    <div class="progress-bar">
        <el-steps :active="OrderdetaList.status + 1" align-center finish-status="success" space="220px">
            <el-step title="提交订单"
                :description="OrderdetaList.createTime == null ? '' : formatTime(OrderdetaList.createTime)" />
            <el-step title="支付订单"
                :description="OrderdetaList.paymentTime == null ? '' : formatTime(OrderdetaList.paymentTime)" />
            <el-step title="平台发货"
                :description="OrderdetaList.deliveryTime == null ? '' : formatTime(OrderdetaList.deliveryTime)" />
            <el-step title="确认收货"
                :description="OrderdetaList.receiveTime == null ? '' : formatTime(OrderdetaList.receiveTime)" />
            <el-step title="完成评价"
                :description="OrderdetaList.commentTime == null ? '' : formatTime(OrderdetaList.commentTime)" />
        </el-steps>
    </div>
    <div class="detailed-box">
        <div class="information-box">
            <div class="title">
                <el-table :data="OrderdetaList2" style="width: 100%" class="red">
                    <el-table-column width="180">
                        <template #default="{ row }">
                            当前订单状态: {{ status(row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column width="885" />
                </el-table>
                <el-button text @click="open">删除</el-button>
                <el-button text @click="dialogFormVisible = true">
                    备注订单
                </el-button>
                <div>
                    <el-dialog v-model="dialogFormVisible" title="备注订单">
                        <el-form :model="form">
                            <el-form-item label="操作备注:">
                                <el-input v-model="form.desc" type="textarea" />
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false">
                                    确定
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
            <!-- 表格 -->
            <div class="Basic-box">
                <!-- 基本信息 -->
                <div class="Basic">
                    <el-icon size="18">
                        <Briefcase />
                    </el-icon>
                    基本信息
                </div>
                <el-table :data="OrderdetaList2" style="width: 100%" border>
                    <el-table-column prop="orderSn" label="订单编号" width="207" />
                    <el-table-column label="发货单流水号" width="207">
                        暂无
                    </el-table-column>
                    <el-table-column prop="memberUsername" label="用户账号" width="207" />
                    <el-table-column label="支付方式" width="207">
                        <template #default="{ row }">
                            {{ paymentMethod(row.payType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单来源" width="207">
                        <template #default="{ row }">
                            {{ orderSource(row.sourceType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单类型" width="212">
                        <template #default="{ row }">
                            {{ orderType(row.orderType) }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="OrderdetaList2" stripe style="width: 100%" border>
                    <el-table-column label="配送方式" width="207">
                        <template #default="{ row }">
                            {{ row.deliveryCompany == '' ? '暂无' : row.deliveryCompany }}
                        </template>
                    </el-table-column>
                    <el-table-column label="物流单号" width="207">
                        <template #default="{ row }">
                            {{ row.deliverySn == '' ? '暂无' : row.deliverySn }}
                        </template>
                    </el-table-column>
                    <el-table-column label="自动收货时间" width="207">
                        <template #default="{ row }">
                            {{ row.autoConfirmDay }}天
                        </template>
                    </el-table-column>
                    <el-table-column prop="integration" label="订单可得优币" width="207" />
                    <el-table-column prop="integration" label="订单可得值" width="207" />
                    <el-table-column prop="promotionInfo" label="活动信息" width="212" show-overflow-tooltip />
                </el-table>
                <!-- 收货人信息 -->
                <div class="Basic">
                    <el-icon size="18">
                        <Briefcase />
                    </el-icon>
                    收货人信息
                </div>
                <el-table :data="OrderdetaList2" style="width: 100%" border>
                    <el-table-column prop="receiverName" label="收货人信息" width="318" />
                    <el-table-column prop="receiverPhone" label="手机号码" width="310" />
                    <el-table-column prop="receiverPostCode" label="邮政编码" width="310" />
                    <el-table-column prop="receiverName" label="收货地址" width="310">
                        <template #default="{ row }">
                            {{ row.receiverProvince }}
                            {{ row.receiverCity }}
                            {{ row.receiverRegion }}
                            {{ row.receiverDetailAddress }}
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 商品信息 -->
                <div class="Basic">
                    <!-- 商品信息 -->
                    <el-icon size="18">
                        <Briefcase />
                    </el-icon>
                    商品信息
                </div>
                <el-table :data="orderItemList" style="width: 100%" border>
                    <el-table-column label="商品图片" width="120" align="center">
                        <template #default="{ row }">
                            <img style="width: 80px;" :src="row.productPic" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" width="638" align="center">
                        <template #default="{ row }">
                            <div>{{ row.productName }}</div>
                            <div>品牌: {{ row.productBrand }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格/货号" width="130" align="center">
                        <template #default="{ row }">
                            <div>价格: ￥{{ row.productPrice }}</div>
                            <div>货号: {{ row.productSn }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格/货号" width="120" align="center">
                        颜色:金色;容量:16G;
                    </el-table-column>
                    <el-table-column prop="productQuantity" label="数量" width="120" align="center" />
                    <el-table-column prop="productQuantity" label="小计" width="120" align="center">
                        <template #default="{ row }">
                            ￥{{ row.productPrice }}
                        </template>
                    </el-table-column>
                </el-table>


                <!-- 费用信息 -->
                <div class="Basic mt">
                    <!-- 费用信息 -->
                    <el-icon size="18">
                        <Briefcase />
                    </el-icon>
                    费用信息
                </div>
                <el-table :data="OrderdetaList2" style="width: 100%" border>
                    <el-table-column label="商品合计" width="310" align="center">
                        <template #default="{ row }">
                            ￥{{ row.totalAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="运费" width="310" align="center">
                        <template #default="{ row }">
                            ￥{{ row.freightAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠券" width="310" align="center">
                        <template #default="{ row }">
                            -￥{{ row.couponAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="积分抵扣" width="318" align="center">
                        <template #default="{ row }">
                            -￥{{ row.integrationAmount }}
                        </template>
                    </el-table-column>
                </el-table>
                <!--  -->
                <el-table :data="OrderdetaList2" style="width: 100%" border>
                    <el-table-column label="活动优惠" width="310" align="center">
                        <template #default="{ row }">
                            -￥{{ row.promotionAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="折扣金额" width="310" align="center">
                        <template #default="{ row }">
                            ￥{{ row.discountAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单总金额" width="310" align="center">
                        <template #default="{ row }">
                            <div style="color: red;">
                                ￥{{ row.totalAmount }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="应付款金额" width="318" align="center">
                        <template #default="{ row }">
                            <div style="color: red;">
                                ￥{{ row.payAmount }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>



                <!-- 操作信息 -->
                <div class="Basic">
                    <!-- 操作信息 -->
                    <el-icon size="18">
                        <Briefcase />
                    </el-icon>
                    操作信息
                </div>
                <el-table :data="historyList" style="width: 100%" border>
                    <el-table-column prop="operateMan" label="操作者" width="120" align="center" />
                    <el-table-column label="操作时间" width="165" align="center">
                        <template #default="{ row }">
                            {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" width="120" align="center">
                        <template #default="{ row }">
                            {{ status(row.orderStatus) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="付款状态" width="120" align="center">
                        <template #default="{ row }">
                            {{ status(row.orderStatus) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="发货状态" width="120" align="center">
                        <template #default="{ row }">
                            {{ status(row.orderStatus) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="note" label="备注" align="center" />
                </el-table>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http'
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Briefcase } from "@element-plus/icons-vue";

// import moment from 'moment';
const router = useRoute()

// 修改时间方法
import { dayjs } from 'element-plus';
const formatTime = (dateTime: any) => {
    // 使用moment.js格式化时间
    return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
}

// 状态 status
// 接口传参需要的id
const orId = router.query.id
console.log(orId);


const OrderdetaList = ref<any>({});

const OrderdetaList2 = ref<any>([]);

const orderItemList = ref<any>([]);

const historyList = ref<any>([]);


// 删除 MessageBox 消息弹框
const open = () => {
    ElMessageBox.confirm(
        'proxy will permanently delete the file. Continue?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

// 弹出表单
const dialogFormVisible = ref(false)
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})




// 支付方式Payment method
const paymentMethod = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const paymentMethod = ['未支付', '支付宝', '微信'];
    return paymentMethod[number] || '未知状态';
}

// 订单来源
const orderSource = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const orderSource = ['PC订单', 'APP订单'];
    return orderSource[number] || '未知状态';
}

//  orderType
const orderType = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const orderType = ['正常订单', '秒杀订单'];
    return orderType[number] || '未知状态';
}

//  status 订单状态
const status = (number: number) => {
    // 在这里根据你的需求将数字转化为中文
    const status = ['待付款', '待发货', '已发货', '已完成', '已关闭', '无效订单'];
    return status[number] || '未知状态';
}

http.order.orderId(orId).then(res => {
    console.log(res);
    OrderdetaList.value = res.data
    // 详情数据
    OrderdetaList2.value.push(res.data)
    // 商品信息
    orderItemList.value = res.data.orderItemList
    // 操作信息
    historyList.value = res.data.historyList

})
</script>

<style scoped lang="less">
.progress-bar {
    width: 1000px;
    margin: 0 auto;
    margin-bottom: 15px;
}

.red {
    color: red;
    font-size: 16px;
}

.detailed-box {
    width: 1242px;
    margin: 0 auto;
    margin-bottom: 50px;
    border: 1px solid #ccc;
    padding: 20px 20px;

    .el-button {
        border: 1px solid #ccc;
    }

    .information-box {
        width: 1248px;

        .title {
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-right: 20px;
            // padding-bottom: 30px;
        }

        .Basic-box {
            .Basic {
                padding: 20px 0;
            }

            .mt {
                margin-top: 50px;
            }
        }
    }
}
</style>